<template>
<el-select class="wd400"  :disabled="disabled" :multiple="multiple" v-model="facilitiesId" placeholder="请选择特色" filterable  :loading="loading" >
    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</template>
<script lang="ts" setup>
 import {ref,reactive,watch,onMounted} from 'vue'
 import {Features} from '@/api/site'
 import {PositionType} from '@/utils/enum'
 
interface Props { //定义传参实体
    modelValue: any,
    disabled: boolean,
    multiple:boolean,
    type: PositionType
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    disabled: false,
    multiple:false,
    type: PositionType.Site
})

  const facilitiesId = ref<any>(props.modelValue)
  interface Emits { //定义事件
    (e: 'update:modelValue', value: any): void
  }
  const emit = defineEmits<Emits>()
  watch(()=>facilitiesId.value,() =>{
    emit('update:modelValue', facilitiesId.value)
  })
  watch(()=>props.modelValue,() =>{
    facilitiesId.value = props.modelValue
  })
  const queryParams  =reactive({
    name:'',
    typeId:props.type
  })
  const list = ref<Feature[]>([])
  const loading = ref(false)

  const loadData =():void => {
    Features(queryParams.name ,queryParams.typeId).then((res:ServiceResponse<Feature[]>) => {
      loading.value = false
      if(res.success)
        list.value = res.data ?? []
    })
  }
  onMounted( () => {
    loadData()
  })
</script>
<style lang="scss" scoped>
 .wd400 {
  width: 400px;
 }
</style>